<template>
  <div>
    <table>
      <thead>
        <tr class="head">
          <th v-for="(item, idx) in conf.thead || []" :key="'thead' + idx">
            <div class="table-head" v-if="item.thType === 'checkboxAll'">
              <a-checkbox @change="v=> checkboxAll(v.target.checked,item, idx)" v-model="item.checkAll">
                {{ item.name }}
              </a-checkbox>
              <a-button @click="v=>checkBatch(null,item,null, idx,v.target.checked)" >批量操作</a-button>
            </div>
            <div v-else>{{ item.name }}</div>
          </th>
        </tr>
      </thead>

      <tbody>
        <tr class="nav" v-for="(item, idx) in conf.tbody || []" :key="'tbody' + idx">
          <td :style="{ 'width': `${ head.width ? head.width : 120  } px` }" v-for="(head, idx2) in conf.thead || []" :key="'tbody-val' + idx2">
            <div v-if="head.tdType === 'checkbox'">
              <a-checkbox
                v-model="checks[head.key + '-' + idx]"
              >
                <span
                  :title="
                    head.title ? 
                    head.forkey ? item[head.forkey][head.key] : item[head.key]
                    : false
                  "
                  @click="v=>oddClick(item,head, idx2,idx,v.target.checked)"
                >
                  {{ 
                    $Map(
                      mapData[head.mapData],
                      head.needID,
                      head.returnID,
                      head.forkey ? item[head.forkey][head.key] : item[head.key],
                      head.key === 'productPlatform' ? item[head.forkey].campaign_id : null
                    )
                  }}
                </span>
              </a-checkbox>
            </div>

            <div v-if=" head.tdType === 'for'">
              <span> {{ item[head.forkey][head.key] }} </span>
            </div>

            <div v-if=" head.tdType === 'operating'">
              <a-button type="danger" size="small" @click="deleteData(item,idx)">
                删除
              </a-button>
            </div>

            <div v-if=" !head.tdType ">{{  item[head.key] }}</div>
          </td>
        </tr>
      </tbody>

    </table>

  </div>
</template>

<script>
export default {
  props: {
    conf: {
      type: Object,
      default: () => ({}),
    },
    mapData:{
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      checks: {},

      indeterminate: true,
      checkAll: true,
      mapDatas:'',
    }
  },
  watch:{
    // mapData:{
    //   deep:true,
    //   handler(params){}
    // },
    conf:{
      handler(params){
        this.setChecks(params)
      },
      deep:true,
      immediate:true,
    }
  },
  mounted() {
    // this.setChecks()
  },
  methods: {
    setChecks(params){
      for (const head of params.thead) {
        if (head.tdType === 'checkbox') {
          let i = 0
          for (const td of params.tbody) {
            let key = head.key + '-' + i
            if( Object.keys(this.checks).indexOf( key ) === -1 ){
              this.$set(this.checks, key, false)
            }
            i++
          }
        }
      }
    },
    checkboxAll(val,item,idx) {
      Object.keys(this.checks).forEach((k) => {
        if ( k.replace(/-\d+/, '') === item.key ) this.checks[k] = val
      })
    },
    // 批量操作按钮
    checkBatch(item,head,x,y,val){
      this.$emit('checkChange',{row:item, col: head,checks:this.checks,x,y ,val })
    },
    // 单个按钮
    oddClick(item,head,x,y,val){
      this.checkBatch(item,head,x,y,val)
    },
    // 全选按钮
    onChange(checkedList) {
      this.indeterminate = !!checkedList.length && checkedList.length < plainOptions.length
      this.checkAll = checkedList.length === plainOptions.length
    },
    // oddCheck(odd){
    //   console.info(odd,'odd')
    // },
    // 删除按钮
    deleteData(item,idx){
      this.$emit('deleteTableList',{ value:item,index:idx })
    },
    // onCheckAllChange(e) {
    //   Object.assign(this, {
    //     checkedList: e.target.checked ? plainOptions : [],
    //     indeterminate: false,
    //     checkAll: e.target.checked,
    //   })
    // },
  },
}
</script>

<style lang="less" scoped>
.ant-checkbox-wrapper ,.ant-checkbox-wrapper-checked{
  width: 180px;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
table {
  width: 100%;
  .head {
    // max-height: 500px;
    // overflow: auto;
    // width: 100%;
    border: 1px solid #c9c9ca;
    .table-head{
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    th {
      // min-width:120px !important;
      text-align: center;
      border: 1px solid #c9c9ca;
      border-collapse: collapse;
      padding: 10px;
    }
  }
  .nav {
    border: 1px solid #c9c9ca;
    td {
      text-align: center;
      border: 1px solid #c9c9ca;
      border-collapse: collapse;
      padding: 10px 20px;
    }
  }
  // 隔行变色
  .nav:nth-child(odd){
    background-color: #F0F2F5;
  }
  .nav:nth-child(even){
    background-color: #E6E6E6;
  }
}
</style>